When creating an image rollover, you need at least 2 different graphics; the one that loads with your webpage and the one that loads when the mouse is moved over the original image. In our example there is a total of 8 different images.

img1on = new Image();           // Active images
img1on.src = "image1on.gif";  
img2on = new Image(); 
img2on.src = "image2on.gif";  
img3on = new Image();
img3on.src = "image3on.gif";
img4on = new Image();
img4on.src = "image4on.gif";

img1off = new Image();          // Inactive images
img1off.src = "image1off.gif"; 
img2off = new Image();
img2off.src = "image2off.gif";  
img3off = new Image();
img3off.src = "image3off.gif";
img4off = new Image();
img4off.src = "image4off.gif";

Above you see the images called within your javascript. The first image objects called begin with img1on and run through img4on. All of the beginning image objects have the same suffix; on. The second image objects called begin with img1off and run through img4off. They share the suffix off. You do not need to name your gifs these particular names, but it is recommended because they keep them organized.

In our example, img1on is the active image (the one which is first seen) and img1off is the image which is seen when the mouse is moved over the first image. Once you have all your images set in the script, you are ready to call the actual rollover in the links on your page.

<A HREF = "yourlink.html" onMouseOver = "imgOn('img1')"
onMouseOut = "imgOff('img1')">
<IMG NAME = "img1" SRC = "image1off.gif"></A>

When calling an image rollover script, you use event handlers passing two functions onMouseOver and onMouseOut. onMouseOver runs the imgOn() function when the mouse is moved over the active image:

function imgOn(imgName) {
   if (document.images) {
       document[imgName].src = eval(imgName + "on.src");
        }
}

This function passes the name of the image to the variable imgName. Then adds on as a suffix to the graphic name. When the on suffix is added to the name, the result is the name of the active graphic img1). The same function is used when the mouse is moved off of the image. The imgOff() function is run:

function imgOff(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "off.src");
        }
}

That is the mystery behind that amazing rollover function in JavaScript. We have a second tutorial on an alternative way to do image rollovers. Please read below; this script checks the browser before loading and preloads the graphics. It is a bit more complicated.

There are many ways to do an image rollover. In this example, we see that the JavaScript preloads the images, where in the first, the images must load when the mouse passes over. This example also does a browser check to make sure the browser supports the script.

The first thing you should do is have a browsercheck. The best browsercheck when we're doing a rollover is if(document.images). This checks if the browser supports the image object. The reason we do this is because there might come (I know Opera4 that comes later this spring will support it) browsers other then ns and ie that supports this, and its much easier then that navigator.appname==3.

Then next thing you should do is preload the images. First "make" a new image object with the new Image() function myimage=new Image(). Then set the src property for the image object. The src property works as in regular HTML. (myimage.src='myimage.gif')

Do I have to do that for every image you ask? Since we are very nice we have made a preloading function for you so you wont have to do that!

To make it easy to follow the rest of this tutorial you should name you images like this: You make 5 images, name them norm1.gif norm2.gif and so on. And 5 images that the norm image will change to when you mouseover, name them over1.gif over2.gif and so on. Then place all the images in a folder named images. (you can change this later if you wish)

function PreloadImages(length, path, type)
{
    for(var i = 1; i<=length; i++) {
        this[i]= new Image()
        this[i].src= path + i + type
    }
    return this
} 

The function used above will preload the images. We call it with the line norm=new PreloadImages(5,'images/norm','.gif'). "norm" is the name of the array we make, "5" is the number of pics we have, "images/norm" is the path where the images is and the name of the image and ".gif" is the imagetype. This will make the images be like this: norm[1].src='images/norm1.gif and so on. Now we have to preload the over images. We do that using over=new PreloadImages(5,'images/over','.gif').

There is how to preload the images in a nutshell. If you have more then five pictures or other names on the pictures just change it in those calling lines.(example: you have 15 images, they are in the same folder as the html document, and they are named hello1.jpg hello2.jpg and so on. The line would then be: hello=PreloadImages(15,'hello','.jpg'))

Here is the functions that will switch the images (we will name the images in page later):

function rollOn(num){
    if(document.images){
        eval('document.images["norm'+num+'"].src
            ='+'over[num].src')}
}

That function is the one that changes the norm image to the over image when you mouseover. Lets go line by line:

• function rollOn(num){ - This line contains the name of the function and the argument num that we will pass when we call the function.
• if(document.images){ - This is the browsercheck. If the users browsers doesn't support the imagearray nothing will happen in this function.
• eval('document.images["norm'+num+'"].src ='+'over[num].src')} - This line uses the eval function to execute strings.
• document.images - The way to reach the image; the image is a image (obviously) and its on the document.
• document.images - The name of the image, I know we haven't named them yet but we will.
• over[num].src - The image that we placed in the src property of the over array earlier.

And here is the rollout function:

function rolloff(num){
if(document.images)
    eval('document.images["norm'+num+'"].src='
            +'norm[num].src')
}

This function does basically the same thing only the other way around.

Now lets make the page that the script will run on:

<HTML>
<HEAD>
    <TITLE>Mouseover</TITLE>
</HEAD>
<BODY>
<a href="#" onmouseover="rollOn(1)" onmouseout="rolloff(1)">
<img src="../images/norm1.gif" name="norm1" border="0"></a>
<a href="#" onmouseover="rollOn(2)" onmouseout="rolloff(2)">
<img src="../images/norm2.gif" name="norm2" border="0"></a>
<a href="#" onmouseover="rollOn(3)" onmouseout="rolloff(3)">
<img src="../images/norm3.gif" name="norm3" border="0"></a>
<a href="#" onmouseover="rollOn(4)" onmouseout="rolloff(4)">
<img src="../images/norm4.gif" name="norm4" border="0"></a>
<a href="#" onmouseover="rollOn(5)" onmouseout="rolloff(5)">
<img src="../images/norm5.gif" name="norm5" border="0"></a>
</BODY>
</HTML>

As you can see we name the images; norm1, norm2, norm3, norm4 and norm5. And we call the rollOn function on mouseover and the rollOff function on mouseout. The link point to # which really just means the top of the page.

Now we have to put in the finished script:

Just place this between the head tag in the page and your set!